<template>
  <div class="relative">
    <client-only>
      <portal
        to="sidebar"
      >
        <div class="text-center lg:text-left text-xl lg:text-2xl font-bold mb-6 lg:mb-12">
          Ça ne devrait pas prendre plus de 3 minutes 😉
        </div>
        <Steps
          :steps="steps"
        />
      </portal>
    </client-only>

    <div class="mb-6 lg:mb-12 text-center text-white">
      <h1 class="text-4xl lg:text-5xl font-medium leading-12 mb-4">
        <span class="font-bold">{{ $store.getters.profile.first_name }}</span>, faisons connaissance
      </h1>
    </div>
    <div class="max-w-xl mx-auto">
      <div
        class="px-8 py-8 bg-white text-black text-3xl font-extrabold leading-9 text-center"
      >
        Sélectionnez vos disponibilités
      </div>
      <div class="p-8 bg-gray-50 border-t border-gray-200">
        <div class="mb-8 text-md text-gray-500">
          Un profil visible vous offre plus de chances de trouver une mission qui répond à votre envie d'engagement, en permettant à une organisation publique ou associative de vous contacter en fonction des domaines d'action que vous avez sélectionnés.
        </div>

        <form id="inscription" class="gap-8 grid grid-cols-1" @submit.prevent="onSubmit">
          <Toggle
            v-model="form.is_visible"
            :label="form.is_visible ? 'Visible des organisations' : 'Invisible des organisations'"
            description="Souhaitez-vous que les organisations de la plateforme vous proposent des missions ?"
          />
          <FormControl
            label="Sélectionnez vos disponibilités"
            html-for="disponibilities"
            required
            :error="errors.disponibilities"
          >
            <TagsGroup
              v-model="form.disponibilities"
              name="disponibilities"
              variant="button"
              :options="$labels.disponibilities"
            />
          </FormControl>
          <div>
            <FormLabel html-for="frequence" required>
              À quelle fréquence souhaitez-vous vous engager&nbsp;?
            </FormLabel>
            <div class="flex flex-col lg:flex-row gap-2 lg:gap-8 lg:items-center lg:justify-center">
              <div class="lg:w-1/2">
                <SelectAdvanced
                  v-model="form.commitment__duration"
                  name="commitment__duration"
                  placeholder="Sélectionnez une durée"
                  :options="$labels.duration"
                />
                <FormError v-if="errors.commitment__duration">
                  {{ errors.commitment__time_period }}
                </FormError>
              </div>
              <div class="flex-none text-sm">
                par
              </div>
              <div class="lg:w-1/2">
                <SelectAdvanced
                  v-model="form.commitment__time_period"
                  name="commitment__time_period"
                  placeholder="Sélectionnez une durée"
                  :options="$labels.time_period"
                />
                <FormError v-if="errors.commitment__time_period">
                  {{ errors.commitment__time_period }}
                </FormError>
              </div>
            </div>
          </div>

          <Button
            size="lg"
            :loading="loading"
            class="w-full"
            @click.native.prevent="onSubmit"
          >
            Continuer
          </Button>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import { object, array } from 'yup'
import { cloneDeep } from 'lodash'
import FormErrors from '@/mixins/form/errors'
import Button from '@/components/dsfr/Button.vue'
import TagsGroup from '@/components/dsfr/TagsGroup.vue'

export default {
  components: {
    Button,
    TagsGroup
  },
  mixins: [FormErrors],
  layout: 'register-steps',
  data () {
    return {
      loading: false,
      model: 'profile',
      steps: [
        {
          name: 'Rejoignez le mouvement',
          status: 'complete',
          href: '/inscription/benevole/step/profile'
        },
        {
          name: 'Votre profil',
          status: 'complete',
          href: '/inscription/benevole/step/profile'
        },
        {
          name: 'Vos préférences',
          status: 'complete',
          href: '/inscription/benevole/step/preferences'
        },
        {
          name: 'Vos disponibilités',
          status: 'current'
        },
        {
          name: 'Vos compétences',
          status: 'upcoming'
        }
      ],
      form: cloneDeep(this.$store.getters.profile),
      formSchema: object({
        disponibilities: array().min(1, 'Merci de sélectionner au moins 1 disponibilité')
      })
    }
  },
  created () {
    if (!this.$store.getters.profile.disponibilities) {
      this.form.disponibilities = ['flexible', 'jours_feries', 'weekend', 'vacances']
    }
    if (!this.$store.getters.profile.commitment__duration) {
      this.form.commitment__duration = '2_hours'
    }
    if (!this.$store.getters.profile.commitment__time_period) {
      this.form.commitment__time_period = 'year'
    }
  },
  methods: {
    onSubmit () {
      if (this.loading) {
        return
      }
      this.loading = true
      this.formSchema
        .validate(this.form, { abortEarly: false })
        .then(async () => {
          await this.$store.dispatch('auth/updateProfile', {
            id: this.$store.getters.profile.id,
            ...this.form
          })
          window.plausible &&
            window.plausible('Inscription bénévole - Étape 3 - Préférences')
          this.$router.push('/inscription/benevole/step/competences')
        })
        .catch((errors) => {
          this.setErrors(errors)
        })
        .finally(() => {
          this.loading = false
        })
    }
  }

}
</script>

<style>

</style>
